<?
	layout("/inc/layout.html",{title:"数据加工系统-首页",htmlType:"index",pageName:"home_index"}){
?>


<div id="cl-wrapper" class="fixed-menu">

	<div class="container-fluid" id="pcont">
		<div class="cl-mcont">

			<!-- row start -->
			<div class="row dash-cols">

				<div class="col-sm-6 col-md-6 col-lg-12">

					<div class="block-flat">
						<div class="header">
							<h5>tips</h5>
						</div>
						<div class="content">
							<p>
								本页面为数据解包界面，仅供数据打包生成的文件使用。
							</p>

						</div>
					</div>

				</div>


				<div class="col-sm-6 col-md-6 col-lg-12" align="center">

					<div style="width: 600px; text-align: left; margin-top: 20px;">
						<h4>#打包文件：</h4>
						<p style="margin-left: 30px; ">
						<div class="input-group"  style="width: 180px;">
							<input id="file1" type="file" accept=".zip"/>
							<input id="file2" name="" type="hidden"/>
							<span class="input-group-btn">
								<button class="btn btn-info" type="button" onclick="uploadFunction();">上传文件</button>
							</span>

						</div>
						</p>
						<p style="margin-left: 30px; margin-top: 30px;">
							*文件上传成功后，点击解包一键解包即可。
							<button type="button" class="btn btn-success btn-lg" onclick="aKeyToUnpack();"><i class="fa fa-gavel"></i> 一键解包 </button>
						</p>
						<h4 style="margin-top: 30px;">#解包进度：</h4>
						<p style="font-size: 16px; margin-left: 30px;">
							上传进度：<span id="bar">0</span>%
						</p>
						<p style="font-size: 16px; margin-left: 30px;">
							文件处理进度：
						</p>
						<div id = "unpackbar">

						</div>

					</div>
				</div>
			</div>
			<!-- row end -->
		</div>
	</div>
</div>

<?
}
?>

<script type="text/javascript">
//===========================   一键解包   ============================================
function aKeyToUnpack(){
    var filePath = $("#file2").val();
    if(filePath == undefined || filePath == null || filePath == ''){
		layer.msg("请上传包文件...");
		return ;
	}
    layer.confirm("是否要一键解包？", {
        btn : [ "确定", "取消" ]
        //按钮
    }, function() {
        $.ajax({
            type : "post",
            url : "/aKeyToUnpack",
            dataType : "json",
            async:true,
			data:{
              "path":filePath
			},
            success : function(data) {
                layer.msg(data[0].msg);
                unpackBar();
            },
            error: function(data) {
            }
        });
    }, function() {
    });

}
//===========================  一键解包    ============================================
/*
<p style="font-size: 16px; margin-left: 30px;">
    已处理文件个数：80/100
</p>
*/

//========================== 解包进度==============================================

function unpackBar(){
    $.ajax({
        type : "post",
        url : "/unpackBar",
        dataType : "json",
        async:true,
        success : function(data) {
           if(data[0].msg==''){
               setTimeout("unpackBar()", 1000);
		   }else{
               var html ='';
               var bar = data[0].msg.split(",");
               for(var i =0;i<bar.length;i++){
                   if(bar[i] != null || bar[i] != ''){
                       html += '<p style="font-size: 16px; margin-left: 30px;">';
                       html += bar[i];
                       html += '</p>';
                   }
               }
               $("#unpackbar").html(html);
               if(data[0].status == '0'){
                   setTimeout("unpackBar()", 1000);
               }
		   }
        },
        error: function(data) {
        }
    });

}
//========================== 解包进度==============================================

//===========================文件上传============================================
//文件上传
function uploadFunction() {
    var uploadFile = $("#file1").get(0).files[0]; //获取文件对象
    // FormData 对象
    var form = new FormData();
    form.append("file", uploadFile); // 文件对象
    $.ajax({
        cache : false,
        type : "POST",
        url : "/backupUpload",
        contentType : false,
        //contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"
        //如果不是用<form>表单构造FormData对象,append()的第二个参数应是文件对象，即$('#file')[0].files[0],contentType也要设置为‘false’。
        processData : false,//processData设置为false。因为data值是FormData对象，不需要对数据做处理
        data : form,
        xhr : function() { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
            myXhr = $.ajaxSettings.xhr();
            if (progressFunction && myXhr.upload) { //检查进度函数和upload属性是否存在
                //绑定progress事件的回调函数
                myXhr.upload.addEventListener("progress",
                    function(evt){
                        if (evt.lengthComputable) {//lengthComputable，表示进度信息是否可用的布尔值；target，对应的 XHR 对象；
                            var completePercent = Math.round(evt.loaded / evt.total*100);//loaded:已经接收的字节数；,total:响应数据的预期总字节数，根据 Content-Length 响应头部确定
                            $("#bar").text(completePercent);
                        }
                    }, true);
            }
            return myXhr; //xhr对象返回给jQuery使用
        },
        error : function(request) {
            layer.msg("请求失败！", {icon: 2});
        },
        success : function(data) {
            //$("#btnUpload").val("上传完成");
            var jsonO = eval(data);
            if(jsonO[0].info =="error"){
                layer.msg("上传失败!");
            }else{
                $("#file2").val(jsonO[0].info);
                $("#bar").text("100");
            }
        }
    });
}
//进度条控制
function progressFunction(evt) {
    if (evt.lengthComputable) {//lengthComputable，表示进度信息是否可用的布尔值；target，对应的 XHR 对象；
        var completePercent = Math.round(evt.loaded / evt.total*100);//loaded:已经接收的字节数；,total:响应数据的预期总字节数，根据 Content-Length 响应头部确定
        $("#bar").text(completePercent);
    }
}
//===========================文件上传============================================
</script>